<!-- 当前委托订单 -->

<template>
  <div class="hisToryList" v-if="!hide">
    <p>{{ data.index }}</p>
    <div class="header">
      <div class="headerLeft">
        <!-- 买 -->
        <div class="name" v-if="data.type == 0">{{ _t18(`buy`) }}</div>
        <!-- 卖 -->
        <div class="name name2" v-if="data.type == 1">{{ _t18(`sell`) }}</div>
        <div class="fw-bold">
          {{
            data.showCoin
                ? data.showCoin
                : data.symbol.toUpperCase() + '/' + data.coin.toUpperCase()
          }}
        </div>
      </div>
      <!-- 撤单 -->
      <div v-if="showChe && data.status == 0" class="headerRight" @click="cancelOrder">
        {{ _t18(`bb_Cancellation`) }}
      </div>
    </div>
    <div class="list">
      <!-- 时间 -->
      <div class="item">
        <div>{{ _t18(`k_time`) }}</div>
        <div class="fw-num numItem" v-if="data.delegateTime">
          {{ _timeFormat(data.params.delegateTime, 'HH:mm MM/DD', true) }}
        </div>
      </div>
      <!-- 委托价 -->
      <div class="item">
        <div>{{ _t18(`bb_commission_price`) }}</div>
        <div class="fw-num numItem">{{ data.delegatePrice || 0 }}</div>
      </div>
      <!-- 委托量 -->
      <div class="item" v-if="!['rxce'].includes(_getConfig('_APP_ENV'))">
        <div>{{ _t18(`bb_commission_amount`) }}</div>
        <div class="fw-num numItem">{{ data.delegateTotal || 0 }}</div>
      </div>
      <!-- 数量 -->
      <div class="item">
        <div>{{ _t18(`metastaking_bb_count`) }}</div>
        <div class="fw-num numItem">{{ data.dealNum || 0 }}</div>
      </div>
      <div class="item" style="color: #000">
        <div>{{ _t18(`metastaking_yingli`) }}</div>
        <div class="fw-num numItem"
             :style="{ color: Number(incomeValue1 > 0) ? '#138a5d' : Number(incomeValue1 <= 0) ? '#d62548' : '' }">
         {{ incomeValue1 || 0 }}
        </div>
      </div>
      <div class="item" style="color: #000">
        <div>{{ _t18(`metastaking_chunli`) }}</div>
        <div
            :style="{ color: Number(incomeValue> 0) ? '#138a5d' : Number(incomeValue <= 0) ? '#d62548' : '' }"
            class="fw-num numItem">{{ incomeValue || 0 }}
        </div>
      </div>
      <!-- 成交价 ,rxce:最新价 -->
      <div class="item" v-if="['rxce'].includes(_getConfig('_APP_ENV')) && data.type === 0">
        <div>{{ _t18(`home_newPrice`) }}</div>
        <div class="fw-num numItem">{{ newPrice || 0 }}</div>
      </div>
      <div class="item" v-else>
        <div>{{ _t18(`home_turnover`) }}</div>
        <div class="fw-num numItem">{{ data.dealPrice || 0 }}</div>
      </div>
      <div class="item" v-else>
        <div>{{ _t18(`home_turnover`) }}</div>
        <div class="fw-num numItem">{{ data.dealPrice || 0 }}</div>
      </div>
      <div class="riSev" @click="showDialog= true" v-if="data.findCanSellWithKeepOrder">
        卖出
      </div>
      <Dialog
          v-model:value="showDialog"
          :title="``"
          :content="_t18('maichu')"
          confirm-button-color="#17ac74"
          @cancelBtn="cancelBtn"
          @confirmBtn="confirmBtn(data)"
          :confirmButtonText="_t18('btnConfirm', ['bitmake'])"
          :cancelButtonText="_t18('cancel')"
          z-index="200"
      ></Dialog>
    </div>
  </div>
</template>
<script setup>
import {cancelOrderCurrencyApi, submitOrderCurrencyApi} from '@/api/trade/index'
import {showToast} from 'vant'
import {useToast} from '@/hook/useToast'
import {useUserStore} from '@/store/user/index'
import {_t18} from '@/utils/public'
import {useTradeStore} from '@/store/trade'
import {_toFixed} from '@/utils/decimal'
import {computed} from 'vue'
import Dialog from "@/components/Dialog/index.vue";

const userStore = useUserStore()
const {_toast} = useToast()

const tradeStore = useTradeStore()
const newPrice = computed(() => {
  return tradeStore.allCoinPriceInfo[props.data.symbol]?.close
})
const props = defineProps({
  data: {
    type: Object,
    default: () => {
    }
  }, info: {
    type: Object,
    default: () => {
    }
  },

  coinInfo: {
    type: Object,
    default: () => {
    }
  }
})

/**
 * 取消订单
 */
const hide = ref(false)
const showChe = ref(true)
const emit = defineEmits(['reduceOrderNum', 'refresh'])
// 撤单
const cancelOrder = async () => {
  const res = await cancelOrderCurrencyApi(props.data.id)
  if (res.code == 200) {
    showToast(res.msg)
    showChe.value = false
    hide.value = true
    emit('reduceOrderNum')
  } else {
    showToast(res.msg)
  }
}


const incomeValue = computed(() => {
  var price
  var r = (newPrice.value - props.data.dealPrice) * props.data.dealNum
  if (props.data.findCanSellWithKeepOrder) {
    if (r > 0 ) {
      console.log(11)
      price = (newPrice.value - props.data.dealPrice) * props.data.dealNum * 0.7
    } else {
      console.log(22)
      price = r
    }
    return _toFixed(price, 4)
  } else {
    price = props.data.profitValue
    return price
  }
})


const incomeValue1 = computed(() => {
  if (props.data.findCanSellWithKeepOrder) {
    var price = (newPrice.value - props.data.dealPrice) * props.data.dealNum
    return _toFixed(price, 4)
  } else {
    price = props.data.winValue
    return price
  }
})




const showDialog = ref(false)
const cancelBtn = () => {
  showDialog.value = false
}


const confirmBtn = (data) => {
  showDialog.value = false
  submit(data)
}
const submit = async (item) => {
  let params = {
    symbol: item.symbol, //交易币种(e.g btc)
    coin: item.coin, //结算币种(usdt)
    delegateTotal: item.delegateTotal, //委托总量
    delegatePrice: item.delegatePrice, //委托价格
    delegateValue: item.dealValue, //委托价值
    delegateType: item.delegateType, //委托类型（0限价1市价）
    srcBuyOrderId: item.srcBuyOrderId, //委托类型（0限价1市价）
    keepOrder: true,
    srcBuyOrder: item.srcBuyOrder, //委托类型（0限价1市价）
    type: 1 //（0买入1卖出）})
  }
  console.log(props.info, 'paramsparams')
  const res = await submitOrderCurrencyApi(params)
  // 购买成功
  if (res.code == 200) {
    userStore.getUserInfo()
    emit('refresh');

    showToast(res.msg)
    // 刷新
  } else {
    showToast(res.msg)
  }
}


</script>
<style lang="scss" scoped>
.colorBlue {
  color: var(--ex-font-color9) !important;
}

.hisToryList {
  padding: 20px 15px 0;
  // border-bottom: 1px solid var(--ex-border-color);
  .header {
    padding-bottom: 20px;
    font-size: 14px;
    color: var(--ex-default-font-color);
    display: flex;
    align-items: center;
    justify-content: space-between;

    .headerLeft {
      display: flex;
      align-items: center;

      .name {
        padding: 0 5px;
        font-size: 12px;
        background: var(--ex-div-bgColor1);
        border-radius: 2px 2px 2px 2px;
        margin-right: 10px;
        color: var(--ex-font-color);
      }

      .name2 {
        background: var(--ex-rfd-fall);
      }
    }

    .headerRight {
      padding: 0 5px;
      background: var(--ex-default-background-color);
      border-radius: 2px 2px 2px 2px;
      opacity: 1;
      border: 1px solid var(--ex-border-color4);
      font-size: 12px;
      color: var(--ex-font-color9);
    }
  }

  .list {
    .item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 12px;
      color: var(--ex-passive-font-color);
      padding-bottom: 15px;

      .numItem {
        color: var(--ex-default-font-color);
      }

      .numItemRed {
        color: var(--ex-font-color15);
      }
    }
  }
}

.riSev {
  height: 1.066667rem;
  background: var(--ex-div-bgColor1);
  border-radius: 0.08rem 0.08rem 0.08rem 0.08rem;
  font-size: 0.373333rem;
  color: var(--ex-font-color);
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
